<template>
  <div class="home">
      <!-- 标题及搜索框 -->
      <div class="topBox">
        <div class="title">饿了吗</div>
        <div class="search">
          <input @click="$router.push('/search')"  type="text" placeholder="请输入商家、商品名称">
        </div>
      </div>

      <!-- <van-button type="primary" @click="$router.push('/detail')">跳详情页</van-button> -->

      <!-- 轮播图组件 -->
      <van-swipe class="my-swipe" :autoplay="1600" >
        <van-swipe-item v-for="(item,index) in swiperlist" :key="index">
          <img :src="item.bannerUrl" alt="">
        </van-swipe-item>
      </van-swipe>

      <!-- 猜你喜欢 -->
      <div class="shopLike">
        <div class="titleLike">猜你喜欢</div>
        <div class="selector">
          <span>综合排序</span>
          <span>距离最近</span>
          <span>销量最高</span>
          <span>筛选</span>
        </div>
        <div class="activity">
          <span>年货热卖</span>
          <span>津贴联盟</span>
          <span>满减优惠</span>
          <span>品质联盟</span>
        </div> 
      </div>

    <div class="list">
      <!-- <h2>店铺列表</h2> -->
      <div class="shop" v-for="(item,index) in shopList" :key="index" @click="$router.push('/detail')">
        <div class="imgbox">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="text">
          <div class="name"> {{item.name}} </div>
          <div class="desc"> {{item.minPriceTip}} {{item.monthSalesTip}} </div>
        </div>
      </div>
    </div>

  </div>  
</template>

<script>

import {shop_list} from '../../utils/api';
import {swiper_list} from '../../utils/api';


export default {
  data(){
    return {
      swiperlist:[],  // 轮播图数据
      shopList:[],  // 商品列表数据

    }
  },
  mounted() {
        shop_list().then((res)=>{
          console.log(res.data);
          this.shopList = res.data.list;
        });
        swiper_list().then((res)=>{
          // console.log(res.data);
          this.swiperlist = res.data.list; 
        });    
  },
  // methods:{
  //   select() {
  //     console.log(123)
  //     this.shopList.sort((a,b)=>{
  //       return b.monthSalesTip - a.monthSalesTip;
  //     })
  //     console.log(this.shopList);
  //   }
    
  // }


}
</script>

<style scoped>
 .home{
    margin-bottom: 40px;
  }

/*  标题及搜索框  */
  .topBox {
    width: 100%;
    height: 100px;
    background-color: rgb(37, 135, 196);
    overflow: hidden;
    margin-bottom: 15px;
  }
  .topBox .title {
    color: white;
    font-size: 24px;
    margin: 10px;
  }
  .topBox .search {
    width: 95%;
    margin:  0 auto;
  }
  .search input {
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    border-radius: 20px;
    text-align: center;
  }

 /* 轮播图 */
  .my-swipe {
    width: 95%;
    margin: 0 auto;
  }
  .my-swipe img{
    width: 100%;
    text-align: center;
    border-radius: 10px;
  }

/* 猜你喜欢 */
   .shopLike {
    width: 100%;
    /* background-color: yellow; */
  }
 .shopLike .titleLike {
    color: black;
    font-size: 20px;
    font-weight: bolder;
    padding-left: 10px;
  }
  .shopLike .selector {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 15px;
    margin-top: 15px;

  }
  .selector span {
    display: inline-block;
    width: 20%;
    text-align: center;
    background-color: rgb(240, 235, 235);
  }
  .selector span:nth-child(1) {
    margin-left: 5px;
  }
  .selector span:nth-child(2) {
    margin-left: 22px;
  }
   .selector span:nth-child(3) {
    margin-left: 22px;
  }
   .selector span:nth-child(4) {
    margin-left: 22px;
  }
  .shopLike .activity {
    width: 100%;
    margin: 0 auto;
  }
  .activity span {
    display: inline-block;
    width: 20%;
    text-align: center;
    background-color: rgb(240, 235, 235);
  }
  .activity span:nth-child(1) {
    margin-left: 5px;
  }
  .activity span:nth-child(2) {
    margin-left: 22px;
  }
  .activity span:nth-child(3) {
    margin-left: 22px;
  }
  .activity span:nth-child(4) {
    margin-left: 22px;
  }

/* 店铺列表 */
  .list {
    margin-top: 15px;
  }
  .list .shop{
    display: flex;
    margin: 10px;
  }
  .list .shop .imgbox{
    width: 80px;
    margin-right: 10px;
  }
  .list .shop .imgbox img{
    width: 100%;
  }
  .shop .text .name {
    font-weight: bolder;
  }


 
</style>